<template>
	<view class="one-store">
		<view class="search_box">
			<uni-easyinput class="search" type="text" placeholderStyle="font-size:28rpx;" @confirm="search"
				:inputBorder="false" @clear="clear" prefixIcon="search" @input="input" v-model="selectVo.workNo"
				placeholder="请输入工单号"></uni-easyinput>
			<view class="search_btn" @click="search">
				搜索
			</view>
		</view>
		<view class="list_top">
			<view class="filt_date">
				<YearsMonth @change="changeDate"></YearsMonth>
				<view class="uniui-down1"></view><span
					style="color: #777;font-weight: 500;">(共{{withdrawalLogList.rows.length}}条)</span>
			</view>
		</view>
		<view class="scroll_content">
			<scroll-view class="scroll-view_list" :refresher-triggered="triggered" refresher-background="transparent"
				@refresherpulling="refresherpulling" refresher-enabled="true" scroll-y="true"
				@scrolltolower="scrolltolower" @refresherrefresh="onRefresh">
				<view v-if="withdrawalLogList.rows.length==0" class="void_goods">
					<image class="img" src="/static/goods.svg"></image>
					<view class="tip">暂无工单</view>
				</view>
				<checkbox-group class="order_list" @change="changeCheck">
					<view class="order_list_item" v-for="(item,index) in withdrawalLogList.rows" :key="index">
						<view class="order_list_item_content">
							<view class="content_display">
								<view class="work_No">
									<span class="work_No_tip">工单单号：</span>
									<span class="order_tip">
										{{item.workNo}}
										<image @click.native.stop="copyText(item.workNo)"
											style="width: 30rpx;height: 30rpx;" src="/static/copy.svg" mode="aspectFit">
										</image>
									</span>
								</view>
								<view class="work_No">
									<span class="work_No_tip">工单金额：</span>
									<span
										class="money">￥{{(item.totalPrice||0).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')}}</span>
								</view>
								<view class="work_No">
									<span class="work_No_tip">客户名称：</span>
									<view class="engineer_info">{{item.username || ''}}</view>
								</view>
								<view class="work_No">
									<span class="work_No_tip">客户手机号：</span>
									<view class="engineer_info">{{item.usePhone || ''}}</view>
								</view>
								<view class="work_No">
									<span class="work_No_tip">工程师名称：</span>
									<view class="engineer_info">{{item.engineer || ''}}</view>
								</view>
								<view class="work_No">
									<span class="work_No_tip">工程师手机号：</span>
									<view class="engineer_info">{{item.engineerPhone || ''}}</view>
								</view>
							</view>
							<checkbox :value="item.id" :checked="item.checked" activeBackgroundColor="#007cff"
								activeBorderColor="#007cff" color="#fff" />
						</view>
						<view class="time_show">
							<image class="list-item_footer_img" src="@/static/network/order/time.svg" mode="aspectFit">
							</image>
							<view class="list-item_footer_time">
								完成时间：{{item.endTime}}
							</view>
						</view>
					</view>
				</checkbox-group>
			</scroll-view>
		</view>
		<view class="footer_order">
			<view class="footer_order_left">
				<label class="radio">
					<radio activeBackgroundColor="#007cff" activeBorderColor="#007cff" color="#fff" value="checked"
						@click="checkedAll" :checked="checked" />全选({{selectIds.length}})
				</label>
			</view>
			<view class="footer_order_right">
				<view class="total_money">
					<span>合计:</span>
					<span class="money_red"><span
							style="font-size: 26rpx;">￥</span>{{(totalMoney||0).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')}}</span>
				</view>
				<view class="btn" v-if="selectIds.length>0" @click="goApplyWithdra">申请提现</view>
				<view class="btn btn_" v-else >申请提现</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref} from "vue"
	import store from '@/store_network/index.js'
	import { onUnload, onShow, onReady } from '@dcloudio/uni-app'
	import apiAccount from '@/util/network_api/account.js'
	import apiNetwork from '@/util/network_api/network.js'
	import YearsMonth from "@/components/u-network/YearsMonth.vue"
	import _ from "lodash";
	const triggered = ref(false)
	// 搜索
	const selectVo = ref({
		"date": "",
		"limit": 0,
		"page": 0,
		"status": 1,
		"workNo": ""
	})
	// 总金额合计
	const totalMoney = ref(0)
	const checked = ref(false)//全选
	// 全选变化
	const checkedAll = () => {
		checked.value = !checked.value
		selectIds.value = []
		totalMoney.value = 0
		withdrawalLogList.value.rows = withdrawalLogList.value.rows.map(o => {
			if (checked.value) {
				selectIds.value.push(o.id)
				totalMoney.value += o.totalPrice
			}
			return { ...o, checked: checked.value }
		})

	}
	
	const copyText = (data) => {
		uni.setClipboardData({
			data: data,
			success() {
				uni.showToast({
					title: '已复制',
					icon: 'success',
				})
			}
		})
	}
	
	const clear = () => {
		selectVo.value.workNo = ''
		getOneStoreList()
	}
	const search = _.debounce(async () => {
		selectVo.value.workNo = selectVo.value.workNo.trim()
		selectVo.value.page=1
		uni.showLoading({
			title: '加载中...'
		})
		getOneStoreList()
	}, 500)
	const input = (n) => {
		if (!n) {
			search()
		}
	}
	const withdrawalLogList = ref({
		total: 0,
		rows: []
	})
	const isAllowManagerHelpWithdrawStrategy = ref(false)
	onShow(() => {
		if(store.state.orderVos.length==0){
			selectIds.value = []
			totalMoney.value = 0
			selectVo.value.date =''
			checked.value=false
		}
		getOneStoreList()
	})
	// 获取列表
	const getOneStoreList = async () => {
		uni.showLoading({
			title: '加载中',
		});
		let data = _.cloneDeep(selectVo.value)
		apiAccount.getNoWithdrawOrderList(data).then(res => {
			uni.hideLoading()
			if (res.success) {
				if (withdrawalLogList.value.rows.length < withdrawalLogList.value.total &&selectVo.value.page > 1) {
					withdrawalLogList.value.rows = [...withdrawalLogList.value.rows, ...res.data.rows]
					withdrawalLogList.value.total = res.data.total
				} else {
					withdrawalLogList.value = res.data
				}
			}
			// 原来选中的设置为true 
			withdrawalLogList.value.rows = withdrawalLogList.value.rows.map(o => {
				return { ...o, checked: selectIds.value.includes(o.id) }
			})
		})
	}
	// 时间变化
	const changeDate = (val) => {
		selectVo.value.date = val
		getOneStoreList()
	}
	onUnload(() => {
		uni.hideLoading()
	})
	// 下拉刷新
	const refresherpulling = (e) => {
		if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
		triggered.value = true
	}
	// 底部触发
	const scrolltolower = () => {
		if (withdrawalLogList.value.rows.length < withdrawalLogList.value.total) {
			selectVo.value.page += 1
			getOneStoreList()
		}
	}
	const onRefresh = async () => {
		selectVo.value.workNo = ''
		selectVo.value.page = 1
		await getOneStoreList()
		setTimeout(() => {
			triggered.value = false
		}, 800)
	}
	// 勾选列表变化
	const selectIds = ref([])
	const changeCheck = (val) => {
		selectIds.value = val.detail.value
		let cunArr = []
		// 设置是否选中
		withdrawalLogList.value.rows = withdrawalLogList.value.rows.map(o => {
			if (selectIds.value.includes(o.id)) {
				cunArr.push(o.totalPrice)
				o.checked = true
			} else {
				o.checked = false
			}
			return o
		})
		totalMoney.value = cunArr.reduce((p, c) => p + c, 0)
		// 判断是否全选
		if (selectIds.value.length > 0 && selectIds.value.length == withdrawalLogList.value.rows.length) {
			checked.value = true
		} else {
			checked.value = false
		}
	}
	// 申请提现
	const goApplyWithdra = () => {
		if (selectIds.value.length == 0) {
			uni.showToast({
				title: "提示",
				content: '请选择要提现的工单！'
			})
			return false
		}
		for(let i = 0; i < selectIds.value.length; i++) {
			let o1 = withdrawalLogList.value.rows.filter(f => f.id == selectIds.value[i]).map(o => {
				return o
			})
			if (o1[0].engineerId !== store.state.userInfo.id && !isAllowManagerHelpWithdrawStrategy.value) {
				uni.showModal({
					title: '提示',
					content: '仅支持提现自己的工单'
				})
				return false
			}
		}
		let arr = withdrawalLogList.value.rows.filter(o => {
			if (o.checked) {
				return {
					"id": '',//
					"oldWithdrawMoney": o.totalPrice,//旧提现金额
					"remark": "",
					"withdrawMoney": 0,//提现金额
					"workId": o.id,
					"workNo": o.workNo//工单单号
				}
			}
		})
		store.commit('set_orderVos', arr)
		uni.navigateTo({
			url: '/pages/pages_network/home/myAccount/applyWithdrawal'
		})
	}
	
	onReady(() => {
		apiNetwork.getIsAllowManagerHelpWithdrawStrategy().then((res) => {
			isAllowManagerHelpWithdrawStrategy.value = res.data.row
		})
	})
</script>

<style lang="scss" scoped>
	.one-store {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;

		.search_box {
			display: flex;
			align-items: center;
			// width: 100%;
			padding: 24rpx;
			background-color: #fff;

			:deep(.uni-easyinput__content) {
				background-color: #f3f4f8 !important;
				border-radius: 50rpx;
			}

			.search {
				flex: 1;
				padding: 0 12rpx;
			}

			.search_btn {
				font-size: 28rpx;
				font-weight: bold;
				color: #007cff;
				margin-left: 12rpx;
			}
		}

		.list_top {
			display: inline-block;
			padding: 24rpx 32rpx 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
background-color: #fafafa;
			.filt_date {
				font-size: 24rpx;
				display: flex;
				align-items: center;
				font-weight: bold;

				.uniui-down1 {
					width: 0;
					height: 0;
					border-left: 10rpx solid transparent;
					border-right: 10rpx solid transparent;
					border-top: 12rpx solid #000;
					margin-left: 8rpx;
					margin-top: 4rpx;
				}
			}
		}


		.scroll_content {
			height: 100%;
			flex: 1;
			overflow: hidden;

			.scroll-view_list {

				::-webkit-scrollbar {
					display: none;
					width: 0 !important;
					height: 0 !important;
					-webkit-appearance: none;
					background: transparent;
					color: transparent;
				}

				height: 100%;
				box-sizing: border-box;

				.void_goods {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					width: 100%;
					height: 50vh;

					.img {
						width: 60%;
						height: 250rpx;
					}

					.tip {
						color: #aaa;
						font-size: 28rpx;
					}
				}

				.order_list {
					margin:0 24rpx 24rpx;
					box-sizing: border-box;
					background-color: fafafa;
					padding-bottom: 300rpx;

					&_item {
						background-color: #FFFFFF;
						margin-bottom: 24rpx;
						padding: 24rpx;

						&_content {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.content_display {
								font-size: 28rpx;
								height: auto;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								row-gap: 3px;

								.work_No {
									flex: 1;
									display: flex;

									.work_No_tip {
										color: #777;
										width: 200rpx;
										text-align: right;
									}

									.order_tip {
										font-weight: 700;
									}

									.money {
										font-size: 30rpx;
										font-weight: 700;
										color: #00c0c0;
									}
									
									.engineer_info {
										width: 350rpx;
										display: flex;
										column-gap: 3px;
										color: #606266;
									}
								}

							}
						}

						.time_show {
							display: flex;
							align-items: center;
							color: rgba(85, 85, 85, 1);
							padding: 8rpx;
							margin-top: 12rpx;
							border-radius: 8rpx;
							background-color: rgba(246, 247, 248, 1);

							.list-item_footer_img {
								width: 30rpx;
								height: 30rpx;
							}

							.list-item_footer_time {
								margin: 0 12rpx;
								font-size: 26rpx;
							}
						}
					}

				}
			}
		}

		.footer_order {
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			z-index: 99;
			height: 120rpx;
			position: fixed;
			bottom: 0;
			width: 100%;
			padding: 48rpx;
			box-sizing: border-box;
			border-top: 1rpx solid rgba(177, 177, 177, 0.1);

			&_left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				margin-right: 24rpx;

				.radio {
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: bold;
				}
			}

			&_right {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.total_money {
					display: flex;
					font-size: 24rpx;
					margin: 0 16rpx;
					display: flex;
					align-items: center;
					font-weight: bold;

					.money_red {
						color: #00c0c0;
						font-weight: bold;
						font-size: 36rpx;
						padding-left: 6rpx;
					}
				}

				.btn {
					flex: 1;
					border-radius: 45rpx;
					height: 80rpx;
					background-color: #007cff;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 28rpx;
					font-weight: bold;
					max-width: 200rpx;
				}

				.btn_ {
					background-color: #007cffa0;
				}
			}

		}

		:deep(.uni-checkbox-input) {
			border-radius: 50%;
		}
	}
</style>